<template>
	<view class="">
		<u-navbar :autoBack='autoBack' :bgColor="bgColor" :placeholder='placeholder' :border='border'>
			<view class="u-nav-slot" slot="left" v-show="leftShow">
				<u-icon @click='backPre' name="arrow-left" :size="leftSize" :color='leftColor'></u-icon>
			</view>
			<view class="u-nav-slot nav_center_title" slot="center">
				<view class="" :style="title_style">{{title}}</view>
			</view>
			<view class="u-nav-slot" slot="right">
				<slot />
			</view>
		</u-navbar>
	</view>

	<!-- 使用 默认背景透明
	<navBar></navBar> -->
</template>

<script>
	/*
	 * @param {autoBack,Boolean} 左边返回键是否默认返回上一页
	 * @param {placeholder,Boolean} 固定在顶部时，是否生成一个等高元素，以防止塌陷
	 * @param {border,Boolean} 导航栏底部是否显示下边框
	 * @param {leftShow,Boolean} 是否显示右边返回箭头
	 * @param {bgColor,Srting} 背景颜色
	 * @param {leftSize,Srting} 左边图标大小
	 * @param {leftColor,Number} 左边图标颜色
	 * @param {title,Srting} 中间文字
	 * @param {title_style,Srting} 中间文字样式
	 * 右边使用的插槽 自定义样式
	 */
	export default {
		props: {
			autoBack: {
				typeof: Boolean,
				default: true
			},
			leftShow: {
				typeof: Boolean,
				default: true
			},
			placeholder: {
				typeof: Boolean,
				default: false
			},
			border: {
				typeof: Boolean,
				default: true
			},
			bgColor: {
				default: '#fff' //rgba(0,0,0,0)
			},
			leftSize: {
				default: 18
			},
			leftColor: {
				default: '#fff'
			},
			title: {
				default: ''
			},
			title_style: {
				default: ""
			}
		},
		components: {},
		data() {
			return {

			}
		},
		mounted() {

		},
		methods: {
			backPre() {
				if (getCurrentPages().length > 1) {
					uni.navigateBack();
				} else {
					// 需要判断是什么角色
					uni.switchTab({
						url: '/pages/index/index'
					});
				}
			},
		},
		computed: {

		},
		watch: {

		}
	}
</script>

<style lang="scss" scoped>
	.nav_center_title {
		font-size: 28upx;
		color: #333;
	}
</style>
